<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>

    <link rel="stylesheet" href="iconfont.css" />
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Microsoft YaHei";
            background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
            height: 760px;
            color: #ffffff;
            line-height: 1.8;
        }
        .main {
            max-width: 500px;
            margin: 30px auto;
            padding: 20px;
        }
        .log {
            background: rgba(255, 255, 255, 0.5);
            color: #333333;
            padding: 15px 25px;
            text-align: center;
        }
        .inputs{
            width: 100%;
            padding: 10px;
            margin: 5px;
        }
        
        .inputs button {
            display: block;
            width: 40%;
            padding: 10px;
            margin: auto;
        }
        #psw, #username {
            padding: 15px 10px;
            padding-bottom: 5px;
            width: 100%;
            background-color: #00000000;
            border: none;
            border-bottom: 1px solid #333333;
        }
        .divUser{
            text-align: right;
        }
        input {
            outline: none;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="log">
            <h1>登 录</h1>
            <p>请使用您的用户名密码进行登录</p>
            <div class="mainLog">
                <form action="">
                        <div class="inputs" id="divUser" >
                            <span class="iconfont icon-nickname"></span>
                            <input type="text" name="username" id="username" placeholder="用户名" style="width: 365px;">
                        </div>
                        <div class="inputs" id="divPsw">
                            <span class="iconfont icon-visible"></span>
                            <input type="password" name="psw" id="psw" placeholder="密码" style="width: 330px;">
                            <img
                            id="demo_img"
                            onclick="hideShowPsw()"
                            src="visible.png"
                            width="30px"
                            />
                        </div>
                        <div class="inputs">
                            <button type="submit">登 录</button>
                        </div>
                        <!-- 控制密码可见性 -->
                        <script type="text/javascript">
                            var demoImg = document.getElementById("demo_img");
                            var demoInput = document.getElementById("psw");
                            function hideShowPsw() {
                            if (demoInput.type == "password") {
                                demoInput.type = "text";
                                demoImg.src = "invisible.png";
                            } else {
                                demoInput.type = "password";
                                demoImg.src = "visible.png";
                            }
                            }
                        </script>
                </form>
            </div>
        </div>
    </div>
</body>
</html>